import React, {Component} from 'react'
import {withRouter,} from 'react-router-dom'
import './plan_item.css'
import GrayBorderRoundAvatar from "../../../../../../shared-components/GrayBorderRoundAvatar/GrayBorderRoundAvatar";
import {queryFromSearchObj, searchObjectFromQuery} from "../../../../../plan-detail/plan-detail";
import {formatDXQOdd} from "../../index/BigSmallTable/BigSmallTable";
import 左边色块 from "../../../../../../../src/res/images/web/plan/左@2x.png"
import 右边色块 from "../../../../../../../src/res/images/web/plan/右@2x.png"
import {Icon} from "antd-mobile";

const PlanItem = props => {
    const data = props.planDate
    const fromDetail = props.fromDetail
    const {
        id,
        icon,
        name,
        goodAt,
        accuracy,
        read,
        yuceKey,
        Rightratefloat,
    } = data
    const yuceKeys = {
        'bs': '总进球',
        'asia': '亚指',
        'eu': '欧指',
    }
    const yuceTitle = yuceKeys[yuceKey]
    const goToPlanDetail = () => {
        let matchId = props.match.params.gameId
        let fromGame = props.match.path.includes('game')
        if (fromGame) {
            // matchId =
            let end = `../plan-detail?matchId=${matchId}&planId=${id}`
            props.history.push(end)
        } else {
            if (props.dontNavigateToDetail) {
                return
            }
            if (props.curPageId !== id) {
                let searchObj = searchObjectFromQuery(props.location.search.slice(1))
                searchObj.planId = id
                let newQuery = queryFromSearchObj(searchObj)
                props.location.search = newQuery
                let end = `../plan-detail${newQuery}`
                props.history.push(end)
                props.getPagePlan(id)
                props.addGoBackCount()
                window.scrollTo(0, 0,)
            }

        }
    }

    const accuracyResult = <div className="plan-item-accuracy">
        <p className="plan-item-accuracy-percent">{`${Rightratefloat}%`}</p>
        {/*<p>近{total}场准确率</p>*/}
    </div>
    const yuedu = <div>
        <span className="gray-text">{read} 阅读</span>
    </div>
    const yuceBlockTextStyle = {
        position: 'absolute',
        top: '4px',
        fontSize: '12px',
    }

    const yuceTemplate = <div className="flex">
        <div style={{position: 'relative',}}>
            <img alt="" src={左边色块} style={{width: 63, height: 20,}}/>
            <span
                style={{
                    ...yuceBlockTextStyle,
                    left: '6px',
                    color: '#FF4F72',
                }}
            >本场方案</span>
        </div>
        <div style={{position: 'relative', marginLeft: '-10px',}}>
            <img alt="" src={右边色块} style={{width: 63, height: 20, }}/>
            <span
                style={{
                    ...yuceBlockTextStyle,
                    right: '6px',
                    color: '#fff',
                }}
            >{yuceTitle}</span>
        </div>
    </div>

    const goToProDetailButton = <div
        style={{
            width: '80px',
            height: '28px',
            borderRadius: '14px',
            border: '1px solid #FFA500',
        }}
        className='flex-center-align-center'
        onClick={(event) => {
            console.log(props)
            if (props.onProClick) {

                props.onProClick()
            } else {
                event.stopPropagation()
                if (props.proEnd) {
                    props.history.push(props.proEnd)
                } else {
                    props.history.push('./plan-pro-detail-page/' + data.Uid)
                }
            }

        }}
    >
        <span
            style={{
                fontWeight: '600',
                color: '#FFA500',
                lineHeight: '16px',
            }}
        >
            去主页
        </span>
        <Icon type="right" size='xs' style={{color: '#FFA500',}}/>
    </div>

    return <div
        className="pd-12 flex-space-between-align-center plan-item-container"
        onClick={goToPlanDetail}
    >

        <div className="flex">
            <GrayBorderRoundAvatar avatarUrl={icon} size="xs" />
            <div className="mg-l-8">
                <div>
                    <div className="flex-align-center mg-b-4px">
                        <p>{name}</p>
                        {/*<span className="plan-item-accuracy-total">近{total}场中{win}</span>*/}
                    </div>
                    <div className="mg-b-4px">
                        {goodAt.map((good, index) => <span
                            key={index}
                            className="plan-item-good-at"
                        >{good}</span>)}
                    </div>

                </div>

                {fromDetail ? null : yuceTemplate}

                {/*{fromDetail ? null : yuedu}*/}
            </div>
        </div>

        {fromDetail ? null : accuracyResult}
        {fromDetail
            ? props.hideGoToPro
                ? null
                : goToProDetailButton
            : null
        }
    </div>
}

export default withRouter(PlanItem)